/**
 * 页面加载状态管理混入
 * 用于解决主题色切换时的页面闪烁问题
 */
export default {
  data() {
    return {
      // 页面加载状态
      pageLoading: true,
      // 主题色是否已加载
      themeLoaded: false,
      // 数据是否已加载
      dataLoaded: false,
      // 页面初始化完成标志
      pageInitialized: false
    }
  },
  
  computed: {
    // 页面是否应该显示内容
    shouldShowContent() {
      return !this.pageLoading && this.themeLoaded && this.dataLoaded
    }
  },
  
  methods: {
    // 开始页面加载
    startPageLoading() {
      this.pageLoading = true
      this.themeLoaded = false
      this.dataLoaded = false
      this.pageInitialized = false
    },
    
    // 标记主题色已加载
    markThemeLoaded() {
      this.themeLoaded = true
      this.checkPageLoadComplete()
    },
    
    // 标记数据已加载
    markDataLoaded() {
      this.dataLoaded = true
      this.checkPageLoadComplete()
    },
    
    // 检查页面加载是否完成
    checkPageLoadComplete() {
      if (this.themeLoaded && this.dataLoaded && !this.pageInitialized) {
        this.pageInitialized = true
        // 延迟一小段时间确保样式完全应用
        this.$nextTick(() => {
          setTimeout(() => {
            this.pageLoading = false
          }, 100)
        })
      }
    },
    
    // 强制完成页面加载（用于没有异步数据的页面）
    forceCompletePageLoading() {
      this.themeLoaded = true
      this.dataLoaded = true
      this.checkPageLoadComplete()
    },
    
    // 重置页面加载状态（用于页面重新显示时）
    resetPageLoadingForShow() {
      // 如果是首次加载，不重置
      if (!this.pageInitialized) {
        return
      }
      
      // 对于已经初始化过的页面，只需要快速检查主题色
      this.pageLoading = true
      this.themeLoaded = false
      
      // 快速完成加载，因为数据通常不需要重新加载
      setTimeout(() => {
        this.themeLoaded = true
        this.dataLoaded = true
        this.pageLoading = false
      }, 50)
    }
  }
}